<template>
  <div class="_wz_courseAdd">
    <Steps :current="current">
      <Step v-for="item in stepsData" :title="item.name" :key="item.name" :content="item.content"></Step>
    </Steps>

    <div style="height: 100%;overflow: hidden;">
      <div v-show="current == 0" class="_wz_courseAddList">
        <Form ref="wzForm1" :model="formData" label-position="right" :label-width="120" :rules="ruleValidate1">
          <FormItem label="年月选择" prop="wzYearMonth">
            <DatePicker type="month" v-model="formData.wzYearMonth" placeholder="请选择年月" @on-change="wzYearMonthFun"></DatePicker>
          </FormItem>
          <FormItem label="培训课程" prop="trainCoursePlanName">
            <i-input v-model="formData.trainCoursePlanName" placeholder="培训课程" clearable />
          </FormItem>
          <FormItem label="培训类型" prop="trainCoursePlanType">
            <i-select v-model="formData.trainCoursePlanType" filterable placeholder="请选择培训类型" @on-change="public.selectName($event,formData,'trainCoursePlanTypeName')" :label-in-value="true" clearable>
              <Option v-for="item in PlanType" :value="item.code" :key="item.code">{{ item.value }}</Option>
            </i-select>
          </FormItem>
          <FormItem label="运输企业" prop="deptUuid">
            <i-select v-model="formData.deptUuid" filterable placeholder="请选择运输企业" clearable @on-change="deptChange">
              <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
            </i-select>
          </FormItem>
          <FormItem label="时间范围" prop="dateRange">
            <DatePicker type="daterange" :options="daterange" v-model="formData.dateRange" placeholder="请选择时间范围" style="width: 200px"></DatePicker>
          </FormItem>
          <FormItem label="随堂测验">
            <i-switch v-model="formData.trainCoursePlanExam" @on-change="changeSwitch" :true-value="Number(1)" :false-value="Number(0)">
              <span slot="open">开</span>
              <span slot="close">关</span>
            </i-switch>
          </FormItem>
        </Form>
      </div>
      <div v-show="current == 1" class="_wz_courseAddList __wz_courseAddList_T">
        <Form :model="formData" label-position="right" :label-width="120">
          <FormItem label="发布类型" class="ivu-form-item-required">
            <RadioGroup v-model="releaseOperation">
              <Radio :label="0" :key="0">按身份发布</Radio>
              <Radio :label="1" :key="1">按人员发布</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="从业身份" class="ivu-form-item-required">
            <CheckboxGroup v-model="examPlanPublishValue" @on-change="studentTypeFun">
              <Checkbox v-for="item in personType" :label="item.code" :key="item.code">{{ item.value }}</Checkbox>
            </CheckboxGroup>
          </FormItem>
        </Form>
        <div style="height: 100%;overflow: hidden;">
          <div style="height: 100%;" ref="tableH2">
            <Table stripe ref="studentList" :loading="loading2" @on-selection-change="StudentTable" border :columns="columns2" :data="data2" :height="tableHeight2"></Table>
          </div>
        </div>
      </div>
      <div v-show="current == 2" class="_wz_courseAddList">
        <Form ref="wzForm3" :model="formData" label-position="right" :label-width="120" :rules="ruleValidate3" class="__wz_courseAddList_T">
          <FormItem label="培训方向" prop="trainCoursePlanDirection">
            <i-select v-model="formData.trainCoursePlanDirection" filterable placeholder="请选择培训方向" @on-change="changeDirection" :label-in-value="true" clearable>
              <Option v-for="item in optionsData" :value="item.code" :key="item.code">{{ item.value }}</Option>
            </i-select>
          </FormItem>
          <div style="height: 100%;overflow: hidden;">
            <div style="height: 100%;" ref="tableH3">
              <Table stripe :loading="loading3" @on-selection-change="selectTable" border :columns="columns3" :data="data3" ref="coursewareList" :height="tableHeight3"></Table>
            </div>
          </div>
          <Row>
            <i-col span="12">
              <FormItem label="课题数量">{{ (!!materialMun && materialMun != 0) ? materialMun : '未选择课件' }}</FormItem>
            </i-col>
            <i-col span="12">
              <FormItem label="课题时长">{{ (!!hours && hours != 0) ? hours + "分钟" : '未选择课件' }}</FormItem>
            </i-col>
          </Row>
        </Form>
      </div>
      <div v-show="current == 3" class="_wz_courseAddList">
        <div style="height: 100%;" ref="tableH4">
          <Table stripe :loading="loading4" border :columns="columns4" :data="data4" :height="tableHeight4"></Table>
        </div>
      </div>
    </div>

    <div class="demo-drawer-footer">
      <Button v-if="current > 0" type="primary" @click="Previous">上一步</Button>
      <Button v-if="current != (stepsData.length-1)" type="primary" @click="next">下一步</Button>
      <Button v-if="current == (stepsData.length-1)" type="primary" @click="courseAdd">提交</Button>
    </div>
    <Drawer :title="matterName" v-model="modal" :draggable="true" width="700" @on-close="changeModal">
      <materialVideo v-if="modal && materialType==1" :materialData="materialData"></materialVideo>
      <materialIframe v-else-if="modal && materialType==5" :materialData="materialData"></materialIframe>
      <materialExam v-else-if="modal && materialType==6" :materialData="materialData"></materialExam>
    </Drawer>

    <Spin size="large" fix v-if="spinShow"></Spin>

  </div>
</template>
<script>
import materialIframe from '../public/materialIframe.vue'
import materialVideo from '../public/materialVideo.vue'
import materialExam from '../public/materialExam.vue'

export default {
  components: {
    materialIframe,//文档
    materialVideo,//视频
    materialExam,//试题
  },
  //
  props: ["selectData"],//接收来自父组件的数据
  data() {
    return {
      spinShow: false,//本页加载
      subDeptList: [],//运输企业
      daterange: {},
      PlanType: [],//培训类型字典
      matterName: "",//素材名称
      modal: false,//弹出层状态
      materialType: 0,//6 试题   5 html   1 视频
      materialData: {src: ""},//查看课件全部数据
      current: 0,//步骤条现在第几部
      formData: {
        wzYearMonth: new Date((new Date().getFullYear()) + '-' + (new Date().getMonth() + 1)),
        trainCoursePlanCreateYear: new Date().getFullYear(),
        trainCoursePlanCreateMonth: this.public.timeFormatting(new Date((new Date().getFullYear()) + '-' + (new Date().getMonth() + 1)), "MM"),
        trainCoursePlanExam: 0,//开关需要  默认需要有数据
        trainCoursePlanPublishDriverValue: [],//表格多选框学员
        trainCoursePlanMaterialUuids: [],//表格多选框
        materialExamUuid: '',
        dateRange: []
      },//表单数据
      //第一步
      startTimeData: {},//开始时间
      endTimeData: {},//开始时间
      stepsData: [
        {"name": "基本信息", "content": "请填写培训对应的基本信息"},
        {"name": "培训学员", "content": "选择您所需要培训的人员完成最后的提交"},
        {"name": "选择课件", "content": "根据培训方向选择本期需要培训的课件"},
      ],//步骤条数据
      ruleValidate1: {
        trainCoursePlanName: [
          {required: true, message: '请填写培训课程', trigger: 'blur'},
          {
            validator: (rule, value, callBack) => {
              if (value.length > 20) {
                callBack('培训课程最多可填写20个文字')
              } else {
                callBack()
              }
            }, trigger: 'blur'
          }
        ],
        trainCoursePlanType: [
          {required: true, message: '请选择课件培训类型', trigger: 'blur'}
        ],
        deptUuid: [
          {required: true, message: '请选择运输企业', trigger: 'blur'}
        ],
        dateRange: [{
          type: 'array',
          required: true, message: '请输入起止日期',
          fields: {
            0: {type: 'date', required: true, message: '请输入起止日期'},
            1: {type: 'date', required: true, message: '请输入起止日期'}
          }
        }],
      },//第一步正则
      //第二部
      examPlanPublishValue: [],
      releaseOperation: 0,//发布操作，默认选择第一个
      personType: [],//从业类型
      loading2: true,//表格加载
      tableHeight2: 450,//培训课件高度
      columns2: [
        {type: 'index', width: 70, align: 'center', title: '序号'},
        {title: '从业人员', key: 'name', minWidth: 100},
        {title: '从业类型', key: 'typeName', minWidth: 100},
        {title: '联系电话', key: 'phone', minWidth: 130},
        {title: '驾乘车辆', key: 'vehiclePlate', minWidth: 120},
        {title: '身份证号', key: 'identifyNum', minWidth: 180},
      ],
      data2: [],
      //第三步
      optionsData: [],//培训方向数据
      loading3: false,//表格加载
      hours: 0,//总课时
      materialMun: 0,//选择课件数量
      columns3: [
        {type: 'selection', width: 70, align: 'center'},
        {type: 'index', width: 70, align: 'center', title: '序号'},
        {
          title: '课件名称', key: 'materialTrainName', minWidth: 180, render: (h, params) => {
            return h('div', [
              h('i', {
                class: [(params.row.materialTrainType == 1) ? "fa fa-file-movie-o" : "fa fa-file-word-o"],
                style: {
                  color: (params.row.materialTrainType == 1) ? "#2d8cf0" : "#009688",
                  "font-size": "12px",
                  "margin": "0px 5px 0px 0px",
                },
              }, ''),
              h('span', params.row.materialTrainName)
            ]);
          }
        },
        {
          title: '课件来源', key: 'materialTrainOpen', minWidth: 160, render: (h, params) => {
            const row = params.row;
            const color = (row.materialTrainOpen == 0) ? "success" : "primary";
            const text = (row.materialTrainOpen == 0) ? "私有课件" : "授权课件";
            return h('Tag', {
              props: {type: 'dot', color: color}
            }, text);
          }
        },
        {
          title: '学习时长', key: 'materialTrainDuration', minWidth: 100, render: (h, params) => {
            return h('span', params.row.materialTrainDuration + "分钟");
          }
        },
        {
          title: '操作', fixed: 'right', width: 100, render: (h, params) => {
            return h('span', {
              style: {"color": "#2d8cf0", "cursor": "pointer"},
              on: {
                click: () => {
                  if (params.row.materialTrainType == 1) {//视频
                    this.matterName = params.row.materialTrainName;
                    this.materialType = 1;
                    this.materialData.videoSdUrl = params.row.materialTrainVideoSdUrl;//标清：SD
                    if (!!params.row.materialTrainVideoHdUrl) {//高清：HD
                      this.materialData.videoHdUrl = params.row.materialTrainVideoHdUrl;
                    }
                    if (!!params.row.materialTrainVideoFdUrl) {//超清：FD
                      this.materialData.videoFdUrl = params.row.materialTrainVideoFdUrl;
                    }
                  } else {//文档
                    this.matterName = params.row.materialTrainName;
                    this.materialType = 5;
                    this.materialData.htmlUrl = params.row.materialTrainHtmlUrl;//文件路径
                    this.materialData.mp3Url = params.row.materialTrainMp3Url;//mp3路径
                  }
                  this.modal = true;
                }
              }
            }, "查看");
          }
        },
      ],
      data3: [],//培训方向数据
      tableHeight3: 450,//培训课件高度
      ruleValidate3: {
        trainCoursePlanDirection: [
          {required: true, message: '请选择试卷方向', trigger: 'blur'},
        ],
      },//第三步正则
      //第四步
      loading4: true,//表格加载
      columns4: [
        {
          title: '选择', key: 'id', width: 70, align: 'center',
          render: (h, params) => {
            let uuid = params.row.uuid;
            let flag = false;
            if (this.formData.materialExamUuid === uuid) {
              flag = true
            } else {
              flag = false
            }
            let self = this
            return h('div', [
              h('Radio', {
                props: {value: flag},
                on: {
                  'on-change': () => {
                    self.formData.materialExamUuid = uuid;
                  }
                }
              })
            ])
          }
        },
        {type: 'index', width: 70, align: 'center', title: '序号'},
        {title: '试卷名称', minWidth: 140, key: 'materialExamName'},
        {title: '考题数量', key: 'materialExamAmount', width: 90},
        {title: '考题总分', key: 'materialExamTotalScore', width: 90},

        {
          title: '课件来源', key: 'materialTrainOpen', minWidth: 150, render: (h, params) => {
            const row = params.row;
            const color = (row.materialExamOpen == 0) ? "success" : "primary";
            const text = (row.materialExamOpen == 0) ? "私有课件" : "授权课件";
            return h('Tag', {
              props: {type: 'dot', color: color}
            }, text);
          }
        },
        {
          title: '操作', width: 100, fixed: 'right', render: (h, params) => {
            return h('span', {
              style: {"color": "#2d8cf0", "cursor": "pointer"},
              on: {
                click: () => {
                  this.matterName = params.row.materialExamName;
                  this.materialType = 6;//6 试题   5 html   1 视频
                  this.modal = true;
                  this.materialData.id = params.row.uuid;
                }
              }
            }, "查看");
          }
        },
      ],
      data4: [],
      tableHeight4: 450,//培训课件高度


    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    //添加默认时间
    let that = this;


    //运输企业
    that.axios.post(that.apiUrl.coreDeptCoreDeptList, {}).then(res => {
      if (!!res) {
        that.subDeptList = res.data.data;
        if (!!!that.selectData.id) {//添加
          that.$set(that.formData, 'deptUuid', '')//行驶证照片
          that.formData.deptUuid = that.subDeptList[0].uuid;
        }
      }
    }).catch(err => {
      console.log("失败", err)
    })

    //培训类型字典
    that.axios.post(that.apiUrl.systemDictSystemDictList, {type: 'plan_type'}).then(res => {
      if (!!res) {
        that.PlanType = res.data.data;
        if (!!!that.selectData.id) {//添加
          that.$set(that.formData, 'trainCoursePlanType', res.data.data[0].code)//行驶证照片
          that.$set(that.formData, 'trainCoursePlanTypeName', res.data.data[0].value)//行驶证照片
        }
      }
    }).catch(err => {
      console.log('失败', err);
    })


    //加载方向
    that.axios.post(that.apiUrl.systemDictSystemDictList, {type: 'training_direction'}).then(res => {
      if (!!res) {
        that.optionsData = res.data.data
      }
    }).catch(err => {
      console.log('失败', err);
    })

    that.$nextTick(function () {
      window.onresize = () => {
        //培训课件高度
        that.tableHeight2 = that.$refs.tableH2.offsetHeight;
        that.tableHeight3 = that.$refs.tableH3.offsetHeight;
        that.tableHeight4 = that.$refs.tableH4.offsetHeight;
      };
    })


    //从业类型
    that.axios.post(that.apiUrl.systemDictSystemDictList, {type: 'person_type'}).then(res => {
      if (!!res) {
        that.personType = res.data.data;
        let userId = [];
        if (!!!that.selectData.id) {//添加
          res.data.data.forEach(function (k, i) {
            userId.push(k.code)
          })
          that.examPlanPublishValue = userId;
        }
      }
    }).catch(err => {
      console.log('失败', err);
    })

    //修改赋值
    if (!!that.selectData.id) {
      //表单
      let data = JSON.parse(JSON.stringify(that.selectData));
      that.changeSwitch(data.trainCoursePlanExam)
      //发布操作  0：按身份，1：按学员
      that.releaseOperation = data.trainCoursePlanPublish;
      //从业类型(逗号分隔)
      if (!!data.trainCoursePlanPublishValue && data.trainCoursePlanPublishValue.length > 0) {
        that.examPlanPublishValue = data.trainCoursePlanPublishValue.split(',');
      }
      //赋值考试发布发布学员UUID（逗号分隔）
      if (!!data.trainCoursePlanPublishDriverValue) {
        data.trainCoursePlanPublishDriverValue = data.trainCoursePlanPublishDriverValue.split(',');
      }
      //课程培训课题ID集合（小写逗号分割）    trainCoursePlanMaterialUuids
      data.trainCoursePlanMaterialUuids = data.trainCoursePlanMaterialUuids.split(',');


      //表单
      data.dateRange = [data.trainCoursePlanBeginDate, data.trainCoursePlanEndDate]

      data.wzYearMonth = new Date(data.trainCoursePlanCreateYear + '-' + data.trainCoursePlanCreateMonth);
      that.formData = data;
      that.changeDirection({
        "label": data.trainCoursePlanDirectionName,
        "value": data.trainCoursePlanDirection
      })


      that.studentTypeFun();
    } else {
      let year = that.formData.trainCoursePlanCreateYear;//年
      let month = that.formData.trainCoursePlanCreateMonth;//月
      that.formData.dateRange = [
        new Date(year, (month - 1), 1),
        new Date(year, month, 0)
      ]


    }

    that.daterange = {
      disabledDate(date) {
        return date.valueOf() < new Date(that.formData.trainCoursePlanCreateYear, (that.formData.trainCoursePlanCreateMonth - 1), 1) || date.valueOf() > new Date(that.formData.trainCoursePlanCreateYear, that.formData.trainCoursePlanCreateMonth, 0);
      }
    };

  },
  methods: {//执行的方法
    next() {//下一步
      let that = this;
      if (that.verify()) {//做每个表单正则使用
        if (that.current == that.stepsData.length - 1) {
          return false;
        } else {
          that.current += 1;
        }
      }
    },
    verify() {
      let that = this;
      let type = false;
      if (that.current == 0) {//第一步验证
        that.$refs["wzForm1"].validate((valid) => {
          if (valid) {
            type = true;
            that.studentTypeFun();
          } else {
            that.$Message.error('请正确填写表单');
            return false;
          }
        })
      }
      if (that.current == 1) {//学员选择验证
        if (!!!that.examPlanPublishValue || that.examPlanPublishValue.length < 1) {
          that.$Message.error('请选择从业类型');
          return false;
        } else {
          type = true;
        }
        if (that.releaseOperation == 1) {//指定人
          if (that.$refs.studentList.getSelection().length == 0) {
            that.$Message.error('请选择需要参加培训的学员');
            return false;
          }

          if (that.formData.trainCoursePlanPublishDriverValue.length < 1) {
            that.$Message.error('请选择需要参加培训的学员');
            return false;
          } else {
            type = true;
          }
        } else {
          if (that.data2.length > 0) {//学院身份 看有list
            type = true;
          } else {
            that.$Message.error('暂无可参加培训的学员');
            return false;
          }
        }
      }
      if (that.current == 2) {//第二步验证
        that.$refs["wzForm3"].validate((valid) => {
          if (valid) {
            if (that.$refs.coursewareList.getSelection().length == 0) {
              that.$Message.error('请选择培训课件');
              return false;
            }

            if (that.formData.trainCoursePlanMaterialUuids.length > 0) {
              if (that.formData.trainCoursePlanMaterialUuids.length > 5) {
                that.$Message.error('最多可选择5个课件');
                return false;
              } else {
                type = true;
              }
            } else {
              that.$Message.error('请选择培训课件');
              return false;
            }
          } else {
            that.$Message.error('请正确填写表单');
            return false;
          }
        })
      }
      if (that.current == 3) {//materialExamUuid 随堂测试 验证

        if (!!that.formData.materialExamUuid) {
          type = true;
        } else {
          that.$Message.error('请选择随堂测验试卷');
          return false;
        }
      }
      return type;
    },
    Previous() {//上一步
      if (this.current == 0) {
        return false;
      } else {
        this.current -= 1;
      }
    },
    //第一步
    changeSwitch(data) {//监听开关
      let that = this;
      if (data == 1) {//开启
        that.stepsData = [{"name": "课题基本信息", "content": "请填写课题对应的基本信息"},
          {"name": "培训人员", "content": "选择您所需要培训的人员完成最后的提交"},
          {"name": "选择课题", "content": "根据培训方向选择本期需要培训的课件"},
          {"name": "随堂测验", "content": "请选择本期课题关联的随堂测验"},]
        // 修改 -- 没有开启考试 -- 开启考试 -- 试卷列表 不会请求ajax
        //else 从新加载考试数据
        if (!!that.formData.trainCoursePlanDirection) {
          that.changeDirection({
            "label": that.formData.trainCoursePlanDirectionName,
            "value": that.formData.trainCoursePlanDirection
          })
        }
      } else {//关闭
        that.stepsData = [{"name": "课题基本信息", "content": "请填写课题对应的基本信息"},
          {"name": "培训人员", "content": "选择您所需要培训的人员完成最后的提交"},
          {"name": "选择课题", "content": "根据培训方向选择本期需要培训的课件"},]
      }
    },
    //第二步
    StudentTable(selection) {//学员表格多选使用
      let userUid = [];
      selection.forEach(function (k, i) {
        userUid.push(k.uuid)
      })
      this.formData.trainCoursePlanPublishDriverValue = userUid;
    },
    //第三部
    changeDirection(data) {//监听培训方向下拉
      let that = this;
      if (!!data) {
        that.formData.trainCoursePlanDirectionName = data.label;
        that.loading3 = true;

        //课件
        that.axios.post(that.apiUrl.educateMaterialTrainMaterialTrainList, {
          materialDirection: data.value,
          deptUuid: that.formData.deptUuid
        }).then(res => {
          that.loading3 = false;
          if (!!res) {
            if (!!that.selectData.id) {
              if (!!that.formData.trainCoursePlanMaterialUuids) {
                that.hours = that.formData.trainCoursePlanTotalDuration;//总课时
                that.materialMun = that.formData.trainCoursePlanMaterialNumber;//选择课件数量
                res.data.data.forEach(function (k, i) {
                  that.formData.trainCoursePlanMaterialUuids.forEach(function (ko, io) {
                    if (k.uuid == ko) {
                      k._checked = true;
                    }
                  })
                })
              }
            } else {
              that.hours = 0;//总课时
              that.materialMun = 0;//选择课件数量
              that.formData.trainCoursePlanMaterialUuids = [];
            }
            that.data3 = res.data.data;//返回数据

          }
        }).catch(err => {
          console.log('失败', err);
        })
        ////////////////////////////////
        //随堂
        if (that.formData.trainCoursePlanExam == 1) {
          that.axios.post(that.apiUrl.webApi + "/educate/materialExam/materialExamList", {
            materialDirection: data.value, deptUuid: that.formData.deptUuid
          }).then(res => {
            that.loading4 = false;
            if (!!res) {
              if (!!that.selectData.id) {
                if (!!that.formData.materialExamUuid) {
                  res.data.data.forEach(function (k, i) {
                    if (k.uuid == that.formData.materialExamUuid) {
                      k._checked = true;
                    }
                  })
                }
                that.data4 = res.data.data;//返回数据
              }
              that.data4 = res.data.data;//返回数据
            }
          }).catch(err => {
            console.log('失败', err);
          })
        }

      } else {
        that.formData.trainCoursePlanDirectionName = "";
      }

    },
    selectTable(selection) {//在多选模式下有效，只要选中项发生变化时就会触发
      let hpurs = 0, trainCoursePlanMaterialUuids = [];
      selection.forEach(function (k, i) {
        hpurs += k.materialTrainDuration;
        trainCoursePlanMaterialUuids.push(k.uuid)
      })
      this.hours = hpurs//总课时
      this.materialMun = selection.length//选择课件数量
      this.formData.trainCoursePlanMaterialUuids = trainCoursePlanMaterialUuids//课件选择的id数组
      this.formData.trainCoursePlanMaterialNumber = trainCoursePlanMaterialUuids.length
    },
    //第四部

    //弹框关闭使用
    changeModal(type) {
      if (!type) {
        this.materialType = 0;
      }
    },
    //最后提交
    courseAdd() {
      let that = this;
      if (!that.verify()) {//做每个表单正则使用
        return;
      }

      that.spinShow = true;
      let data = that.formData;

      //发布操作  0：按身份，1：按学员
      data.trainCoursePlanPublish = that.releaseOperation;
      //从业类型(逗号分隔)
      data.trainCoursePlanPublishValue = that.examPlanPublishValue.join(',');
      if (!!!data.trainCoursePlanPublishValue && data.trainCoursePlanPublishValue.length < 1) {
        that.spinShow = false;
        that.$Message.warning("请选择从业身份");
        return false;
      }
      data.trainCoursePlanPublishValueName = that.public.extractName(that.personType, that.examPlanPublishValue, {
        uniqueValue: 'code',
        name: 'value',
      }).value.join(',')//从业身份中文


      //提交先判断 发布操作 类型   如果是指定  判断选择个数
      if (data.trainCoursePlanPublish == 0) {
        data.trainCoursePlanPublishDriverValue = null;
      } else {
        if (that.$refs.studentList.getSelection().length < 1) {
          that.spinShow = false;
          that.$Message.warning("请选择选择发布的学员");
          return;
        } else {
          data.trainCoursePlanPublishDriverValue = data.trainCoursePlanPublishDriverValue.join(',');
        }
      }
      //课程培训课题ID集合（小写逗号分割）    trainCoursePlanMaterialUuids
      data.trainCoursePlanMaterialUuids = data.trainCoursePlanMaterialUuids.join(',');

      if (data.trainCoursePlanExam == 0) {
        data.materialExamUuid = '';
      }


      data.trainCoursePlanBeginDate = !!that.formData.dateRange[0] ? that.public.timeFormatting(that.formData.dateRange[0], "yyyy-MM-dd") : '';
      data.trainCoursePlanEndDate = !!that.formData.dateRange[1] ? that.public.timeFormatting(that.formData.dateRange[1], "yyyy-MM-dd") : '';


      that.axios.post(that.apiUrl.webApi + "/educate/trainPlan/trainCoursePlanSaveOrUpdate", data).then(res => {
        that.spinShow = false;
        if (!!res) {
          that.$Message.success("保存成功");
          that.$emit("closeFun", true)
        }
      }).catch(err => {
        console.log('失败', err);
      })
    },
    studentTypeFun() {//从业类型变动  加载表格
      let that = this;
      if (!that.formData.deptUuid) {
        that.data2 = [];
        return false;
      }
      that.loading2 = true;

      //加载人员
      if (!!that.examPlanPublishValue && that.examPlanPublishValue.length > 0) {
        that.axios.post(that.apiUrl.coreDriverCoreDriverList, {
          typeList: that.examPlanPublishValue,
          binding: 1,
          deptUuid: that.formData.deptUuid
        }).then(res => {//加载所有数据
          that.loading2 = false;
          if (!!res) {
            if (!!!that.selectData.id) {//添加
              that.data2 = res.data.data;//返回数据
            } else {
              if (!!that.formData.trainCoursePlanPublishDriverValue) {
                res.data.data.forEach(function (k, i) {
                  that.formData.trainCoursePlanPublishDriverValue.forEach(function (ko, io) {
                    if (k.uuid == ko) {
                      k._checked = true;
                    }
                  })
                })
              }
              that.data2 = res.data.data;//返回数据
            }
          }

        }).catch(err => {
          console.log('失败', err);
        })
      } else {
        that.data2 = [];
        that.loading2 = false;
      }
    },

    wzYearMonthFun() {
      var that = this;
      that.formData.trainCoursePlanCreateYear = that.public.timeFormatting(that.formData.wzYearMonth, "yyyy");
      that.formData.trainCoursePlanCreateMonth = that.public.timeFormatting(that.formData.wzYearMonth, "MM");


      let year = that.formData.trainCoursePlanCreateYear;//年
      let month = that.formData.trainCoursePlanCreateMonth;//月
      that.formData.dateRange = [
        new Date(year, (month - 1), 1),
        new Date(year, month, 0)
      ]

    },
    deptChange() {//从业类型变动  加载表格
      let that = this;
      if (!that.formData.deptUuid) {
        that.data3 = [];
        that.data4 = [];
      }
    },
  },
  watch: {//监听
    //发布类型监听
    releaseOperation(news, old) {
      let that = this;
      if (news == 1) {//指定人员培训  去除从业类型选项  表格加载所有人的数据  加上多选
        that.columns2.splice(0, 0, {type: 'selection', width: 70, align: 'center'});
      } else {//从业从业类型培训  显示从业类型  从新加载表格 无数据  去除多选
        if (that.columns2[0].key != "name") {
          that.columns2.splice(0, 1);//
        }
      }
    },
    current(news, old) {
      this.$nextTick(function () {
        this.tableHeight2 = this.$refs.tableH2.offsetHeight;
        this.tableHeight3 = this.$refs.tableH3.offsetHeight;
        this.tableHeight4 = this.$refs.tableH4.offsetHeight;
      })
    },
  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态
    window.onresize = null;
  }
}
</script>
<style lang="less">
._wz_courseAdd {
  height: 100%;
  display: flex;
  flex-direction: column;

  ._wz_courseAddList {
    height: 100%;
    width: 95%;
    margin: auto;
    padding: 20px 0;
  }

  .__wz_courseAddList_T {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .ivu-modal {
    top: 0;
  }
}
</style>
